<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        // 先看看传统的复制方式
        // let arr = [1,2,3];
        // let arr2 = arr.concat();
        // console.log(arr2);

        // 我们利用ES6的扩展运算符实现赋值，但是只支持浅层的数组, 有嵌套的就是浅拷贝了
        let arr = [1, 2, 3];
        let arr2 = [...arr];
        let arr3 = [...arr, ...arr2]; //我们也可以利用扩展运算符进行数组的合并

        let arr4 = [1, 2, 3, 4, 5, 6, 7, 8];
        let [a, b, ...c] = arr4; //这样我们用三个变量就接收下了数组里的所有值;

        // Array.from()将伪数组转换为真实的数组, 比如document.querySelectorAll()、arguments
        (function test() {
            Array.from(arguments).forEach(item => console.log(item));
        })(11, 22, 33)
        Array.from(document.querySelectorAll('ul li')).forEach(item => console.log(item));

        // Array.of()
        let array1 = Array(3); //只传一个数值会被当成数组的长度，而不是只包含3这个数值的数组
        let array2 = Array.of(3); //of方法解决了这个问题，但是好像改变也就仅此而已了
        console.log(array1, array2);

        /*
             find()  找到数组中满足条件的第一项本身
             findIndex()  找到数组中满足条件的第一项的索引也就是下标
        */
        let array3 = [11, 22, 33, 44, 55];
        console.log(array3.find(item => item == 22));
        console.log(array3.findIndex(item => item == 33));

        /*
            findLast()  findLastIndex()  这两个方法来自ES2022也就是ES13
            这两个和上面两个一样的作用，只是这两个是从后往前找, 从数组的末尾开始找。注意虽然是从后往前找，但是返回的依然是下标而不是从后往前的顺序。比如下面这个案例中，44的下标依然是3。
        */
        let array4 = [11, 22, 33, 44, 55];
        console.log(array3.findLast(item => item == 22)); //22
        console.log(array3.findLastIndex(item => item == 44)); //3

        /*
            fill()方法可以初始化一个数组或者对于数组里的元素进行替换
                - 传入一个参数value：将每一项都赋值为value
                - 传入三个参数value,start,end：将下标为start到end的元素赋值为value, 注意不包含end。
        */
        let array5 = Array(5).fill('zzz'); //相当于给一个长度为5的数组每一项都赋值为'zzz';
        let array6 = [1, 2, 3, 4, 5]
        array6.fill('xxx', 1, 4);
        console.log(array5, array6);

        /*
            flat() 用于将数组扁平化处理，说白了就是把二维数组变为一维数组，注意不能对超过二维的数组使用
        */
        let array7 = [
            [1, 2, 3],
            [4, 5, 6, 7], 8, [9, 10]
        ];
        console.log(array7.flat());

        /*
            但是真实的开发中数据的格式不见得是数组套数组，通常是数组里包对象，对象里的数组才是我们要处理的，这时候flat()显然就不好用了

            flatMap(function(item){
                return 
            }) 
                - flatMap接收一个回调函数，该回调函数像forEach里面的一样，接收三个参数item,index,array。需要在该函数最后return item.xxxx , xxxx就是你想要做扁平化处理的属性，比如下面这个案例就是city
        */
        let array8 = [{
                name: 'A',
                city: ['安阳', '安庆']
            },
            {
                name: 'B',
                city: ['北京', '保定']
            }
        ]
        console.log(array8.flatMap(item=>item.city));
    </script>
</body>

</html>